<template>
  <div class="see-content">
    <TitleBar title="审批文档" refresh />
    <div class="add-content">
      <div class="content-title">
        <p>审批文档内容</p>
      </div>
      <div class="publish-form">
        <el-form
          :inline="true"
          :rules="contentRules"
          :model="publishContent"
          ref="publishContent"
          class="demo-form-inline"
        >
          <el-form-item label="发布文档名称:" prop="title">
            <el-input
              type="text"
              v-model="publishContent.title"
              class="form-input"
              placeholder="输入文档名称"
              maxlength="30"
            />
          </el-form-item>
          <el-form-item label="发布文档摘要:" prop="abstract">
            <el-input
              type="text"
              v-model="publishContent.abstract"
              class="form-input"
              placeholder="输入文档摘要"
              maxlength="30"
            />
          </el-form-item>
          <el-form-item label="发布显示页面:" prop="showValue">
            <el-select v-model="publishContent.showValue" placeholder="选择文档显示页面，APP端相应页面">
              <el-option
                v-for="item in publishContent.showOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="发布文档内容:" prop="content" class="from-textarea">
            <el-input
              v-model="publishContent.content"
              type="textarea"
              placeholder="输入发布内容，字数不超过150字"
              resize="none"
              maxlength="500"
            />
          </el-form-item>
          <div>
            <el-form-item label="编辑人:" class="sort-input">
              <el-input
                v-model="publishContent.editor"
                style="margin-left: 18px"
                placeholder="关联员工ID及用户名"
                disabled
              />
            </el-form-item>
            <el-form-item
              label="编辑部门:"
              class="sort-input"
              style="margin-left: 50px"
            >
              <el-input v-model="publishContent.editdepar" placeholder="关联系统部门" disabled />
            </el-form-item>
            <el-form-item
              label="编辑日期:"
              class="sort-input"
              style="margin-left: 50px"
            >
              <el-input v-model="publishContent.editData" placeholder="关联系统日期" disabled />
            </el-form-item>
          </div>
          <el-form-item class="from-button">
            <el-button @click="cancelFile">取消</el-button>
            <el-button type="primary" @click="submitForm('publishContent')">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { fileApproval, getApprover } from "@/api/operate.js";
import { formatDateAndTime, formatDate } from "@/utils/util";
export default {
  data() {
    return {
      // 搜索框
      query: "",
      // 表单一
      publishContent: {
        title: "",
        abstract: "",
        content: "",
        editor: "",
        editdepar: "",
        editData: "",
        showValue: "",
        showOptions: [
          {
            value: "sm",
            label: "我的-用户等级页面"
          },
          {
            value: "xy",
            label: "用户协议页面"
          },
          {
            value: "wt",
            label: "常见问题页面"
          }
        ]
      },
      // ApproveState: "1",
      // 审批人
      approverName: "",
      // 表单按钮默认值
      contentRadio: "启用",
      // 表单验证规则
      contentRules: {
        title: [
          { required: true, message: "请输入文档名称", trigger: "blur" },
          { max: 30, message: "长度在 30 个字符内", trigger: "blur" }
        ],
        abstract: [
          { required: true, message: "请输入文档摘要", trigger: "blur" },
          { max: 30, message: "长度在 30 个字符内", trigger: "blur" }
        ],
        showValue: [
          { required: true, message: "请输入发布显示页面", trigger: "change" }
        ],
        content: [
          { required: true, message: "请输入文档内容", trigger: "blur" },
          { max: 500, message: "长度在 500 个字符内", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.rendering();
    this.getSystemTime();
  },
  methods: {
    // 渲染获取数据
    rendering() {
      const routeData = this.$route.query.data;
      console.log(routeData, 4444444);
      this.publishContent.title = routeData.documentName;
      this.publishContent.abstract = routeData.documentAbstract;
      this.publishContent.showValue = routeData.documentType;
      this.publishContent.content = routeData.documentContent;
      this.publishContent.editor = routeData.editor;
      this.publishContent.editData = routeData.editData;
      this.publishContent.editData = formatDateAndTime(routeData.editorDate);
      this.publishContent.editdepar = routeData.editorDepartmentCode;
      // console.log(this.publishContent.showValue, 4444444)
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          fileApproval({
        documentCode: this.$route.query.data.documentCode,
        documentAbstract: this.publishContent.abstract,
        documentContent: this.publishContent.content,
        documentName: this.publishContent.title,
        editor: this.publishContent.editor,
        editorDepartmentCode: this.publishContent.editdepar,
        documentType: this.publishContent.showValue,
        id: this.$route.query.data.id,
        approveState: "1"
      })
        .then(res => {
          console.log(this.publishContent.showValue, "seecontent");
          this.$message({
            message: "审批成功",
            center: true,
            type: "success"
          });
          this.approver();
          this.$router.push({
            name: "operate_4"
          });
        })
        } else {
          return false
        }
      })
    },
    approver() {
      // let editorCode = this.$route.query.data.editor
      // console.log(editorCode)
      getApprover({
        code: this.$route.query.data.editor
      }).then(res => {
        console.log(res);
        // console.log(123123)
        this.approverName = res.message;
      });
    },
    getSystemTime() {
      const systemTime = new Date();
      this.publishContent.editData = formatDate(systemTime);
    },
    // 取消
    cancelFile() {
      this.$router.push({
        name: "operate_4"
      });
    }
  }
};
</script>
<style scoped lang="scss">
.see-content {
  font-family: PingFang-SC-Bold;
  width: 100%;
  /*height: 100%;*/
  /*overflow: auto;*/
  padding: 0 110px 110px 30px;
  margin: 16px 0;
}
.title {
  width: 100%;
  height: 37px;
  display: flex;
  flex-flow: nowrap row;
  margin: 16px 0;
  justify-content: space-between;
}
.title-left {
  height: 37px;
  display: flex;
  align-items: center;
  float: left;
}
.title-left > div {
  width: 11px;
  height: 20px;
  display: inline-block;
  background: rgba(72, 141, 255, 1);
  border-radius: 4px;
}
.title-left > p {
  margin-left: 14px;
}
.add-content {
  width: 100%;
  padding: 36px 0 0 28px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.1);
  border-radius: 4px;
}
.content-title {
  width: 200px;
  height: 40px;
  background: rgba(72, 141, 255, 1);
  border-radius: 4px 0px 0px 4px;
  position: relative;
}
.content-title > p {
  display: inline-block;
  line-height: 40px;
  font-size: 16px;
  font-weight: 400;
  margin-left: 10px;
  margin-top: 0;
  margin-bottom: 0;
  color: rgba(243, 243, 243, 1);
}
.content-title:after {
  position: absolute;
  right: -33px;
  top: 0;
  width: 34px;
  height: 40px;
  content: "";
  display: block;
  clear: both;
  background-color: rgba(72, 141, 255, 1);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  line-height: 40px;
  text-align: center;
}
.publish-form {
  padding: 20px 0 53px 40px;
  display: flex;
  flex-direction: column;
  align-content: space-between;
}
</style>

